import {useDispatch, useSelector} from "react-redux";
import {fetchGetOneEquipmentById} from "@/store/modules/equipmentStore.jsx";
import {useEffect} from "react";
// 接收路由传递过来的参数时，要导入useParams函数
import {useParams} from "react-router-dom";
import {useNavigate} from "react-router-dom";


const Index = () => {
    const {equipment}=useSelector(state=>state.equipment);
    const dispatch=useDispatch();
    // 执行一下useParams函数
    const params=useParams();

    const navigate=useNavigate();


    useEffect(()=>{
        // 通过获取到的路由传递的参数中的id（其中一个参数名字--名字与router中的Index中navigate函数中名字匹配）
        dispatch(fetchGetOneEquipmentById(params.id))
    },[dispatch])

    return (
        <div>
           <span>{equipment.eqName}</span><br/>
            <span>{params.id}</span><br/>
            <span>{params.name}</span>

            <br/>
            {/*跳转到设备首页*/}
            <button  onClick={()=>navigate(`/equipment/`)}>跳转到设备页</button>

        </div>
    )
}

export default Index